<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生成旅游计划 - 智能旅游路线推荐系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <div class="container">
        <a class="navbar-brand" href="/travel/">智能旅游路线推荐</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="/travel/">首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="/travel/generate">生成行程</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container my-5">
    <div class="row">
        <div class="col-lg-8 mx-auto">
            <h2 class="mb-4">生成旅游计划</h2>

            <form id="generateForm" class="mb-5">
                <div class="mb-3">
                    <label for="city" class="form-label">目的地城市</label>
                    <input type="text" class="form-control" id="city" name="city" placeholder="例如：北京" required>
                </div>
                <div class="mb-3">
                    <label for="days" class="form-label">旅行天数</label>
                    <select class="form-control" id="days" name="days" required>
                        <option value="">请选择天数</option>
                        <option value="1">1天</option>
                        <option value="2">2天</option>
                        <option value="3">3天</option>
                        <option value="4">4天</option>
                        <option value="5">5天</option>
                        <option value="6">6天</option>
                        <option value="7">7天</option>
                    </select>
                </div>
                <button type="submit" class="btn btn-primary" id="generateBtn">生成旅游计划</button>
            </form>

            <div id="loading" class="text-center d-none">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">正在生成中...</span>
                </div>
                <p class="mt-2">正在为您生成旅游计划，请稍候...</p>
                <p class="text-muted small">根据城市信息和景点数量，可能需要20-30秒</p>
            </div>

            <div id="errorMessage" class="alert alert-danger d-none"></div>
        </div>
    </div>
</div>

<footer class="bg-light py-3 mt-5">
    <div class="container text-center">
        <p>&copy; 2023 智能旅游路线推荐系统</p>
    </div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
    $(function() {
        $('#generateForm').on('submit', function(e) {
            e.preventDefault();

            const city = $('#city').val().trim();
            const days = $('#days').val();

            if (!city || !days) {
                showError('请输入目的地城市和选择旅行天数');
                return;
            }

            // 显示加载状态
            $('#generateBtn').prop('disabled', true);
            $('#loading').removeClass('d-none');
            $('#errorMessage').addClass('d-none');

            // 发送请求
            $.ajax({
                url: '/travel/generate',
                method: 'POST',
                data: {
                    city: city,
                    days: days
                },
                success: function(response) {
                    if (response.success) {
                        // 跳转到计划详情页
                        window.location.href = '/travel/plan/' + response.planId;
                    } else {
                        showError(response.message || '生成旅游计划失败，请重试');
                    }
                },
                error: function() {
                    showError('服务器错误，请稍后重试');
                },
                complete: function() {
                    $('#generateBtn').prop('disabled', false);
                    $('#loading').addClass('d-none');
                }
            });
        });

        function showError(message) {
            $('#errorMessage').text(message).removeClass('d-none');
        }
    });
</script>
</body>
</html>
